<template>
  <div class="myorder">
    <div class="morder">
      <van-icon name="arrow-left" size="20" />
      <p>我的订单</p>
      <van-icon name="chat-o" size="20" />
    </div>

    <div>
      <van-tabs v-model="active">
        <van-tab title="全部订单">
          <div class="first">
              <img src="../assets/img/dadog.png" >
              <p>你没有相关订单</p>
              <van-button color="green" round type="info" plain>去逛逛</van-button>
          </div>
        </van-tab>
        <van-tab title="待付款"> 
        <div class="first">
            <img src="../assets/img/dadog.png" >
              <p>你没有相关订单</p>
              <van-button color="green" round type="info" plain>去逛逛</van-button>
        </div>
        </van-tab>
        <van-tab title="待收货">
        <div class="first">
            <img src="../assets/img/dadog.png" >
              <p>你没有相关订单</p>
              <van-button color="green" round type="info" plain>去逛逛</van-button>
        </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Icon } from "vant";
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Icon);
Vue.use(Tab);
Vue.use(Tabs);

export default {
  data() {
    return {
      active: 2,
    };
  },
};
</script>

<style src="../assets/css/Order.css">
</style>